// Create the canvas


var canvas = document.createElement("canvas"); 
 var ctx = canvas.getContext("2d"); 
canvas.width = 512; 
canvas.height = 480; 
document.body.appendChild(canvas);

// Background image 
var bgReady = false; 
var bgImage = new Image();
bgImage.onload = function () { 
 bgReady = true; 
}; 
bgImage.src = "images/background.png";

// Hero image 
var heroReady = false; 
var heroImage = new Image(); 
heroImage.onload = function () { 
 heroReady = true; 
}; 
heroImage.src = "images/hero1.png";

// Monster image 
var monsterReady = false; 
var monsterImage = new Image(); 
monsterImage.onload = function () { 
 monsterReady = true; 
}; 
monsterImage.src = "images/monster1.png";

// Second Monster image
var monster1Ready = false; 
var monster1Image = new Image(); 
monster1Image.onload = function () { 
 monster1Ready = true; 
}; 
monster1Image.src = "images/monster1.png";



// Chomp sound 
var snd = new Audio("audio/bell.wav");

// Game objects 
var hero = { speed: 256, // movement in pixels per second 
 x: 0, y: 0 
 }; 
var monster = { x: 0, y: 0 }; 
var monstersCaught = 0;
var monster1 = { x: 0, y: 0 }; 




// Handle keyboard controls 
var keysDown = {}; 
addEventListener("keydown", function (e) { keysDown[e.keyCode] = true; }, false); 
addEventListener("keyup", function (e) { delete keysDown[e.keyCode]; }, false);

var start = true;



// Reset the game when the player catches a monster 
var reset = function () { 
if (start){ 
 hero.x = canvas.width / 2; 
 hero.y = canvas.height / 2; 
 start = false; 
}

// Throw the monster somewhere on the screen randomly
monster.x = 32 + (Math.random() * (canvas.width - 128)); 
monster.y = 32 + (Math.random() * (canvas.height - 128)); 
monster1.x = 32 + (Math.random() * (canvas.width - 128)); 
monster1.y = 32 + (Math.random() * (canvas.height - 128)); 


//Add in the reset function 

if(snd.currentTime > 0) 

{ 
snd.currentTime=0; 

//this is to make sure the sound resets if it is still playing 
} 
snd.play();
};

// Update game objects 
var update = function (modifier) { 
if (38 in keysDown) { // Player holding up
hero.y = (hero.y > 32) ? (hero.y - hero.speed * modifier) : hero.y;
}
if (40 in keysDown) { // Player holding down
hero.y = (hero.y < canvas.height - 80) ? (hero.y + hero.speed * modifier) : hero.y;
}
if (37 in keysDown) { // Player holding left
hero.x = (hero.x > 32) ? (hero.x - hero.speed * modifier) : hero.x;
}
if (39 in keysDown) { // Player holding right
hero.x = (hero.x < canvas.width - 64) ? (hero.x + hero.speed * modifier) : hero.x;
}


// Are they touching? 

 if ( hero.x <= (monster.x + 30) && monster.x <= (hero.x + 30) && hero.y <= (monster.y + 45) 
&& monster.y <= (hero.y + 45) ) { 
 ++monstersCaught; 
 monster.x = 1000; 
monster.y = 1000; 
if(monstersCaught%2==0)
 reset();
 }


 else if ( hero.x <= (monster1.x + 30) && monster1.x <= (hero.x + 30) && hero.y <= (monster1.y + 45) 
&& monster1.y <= (hero.y + 45) ) { 
 ++monstersCaught; 
  monster1.x = 1000; 
monster1.y = 1000; 
if(monstersCaught%2==0)
 reset();
 }
};
 
 
// Draw everything 
var render = function () { 
 if (bgReady) { 
 ctx.drawImage(bgImage, 0, 0); } 
 if (heroReady) { 
 ctx.drawImage(heroImage, hero.x, hero.y); } 
 if (monsterReady) { 
 ctx.drawImage(monsterImage, monster.x, monster.y); } 
  if (monster1Ready) { 
 ctx.drawImage(monster1Image, monster1.x, monster1.y); } 
 
 
 // Score 
 ctx.fillStyle = "rgb(250, 250, 250)"; 
 ctx.font = "24px Helvetica"; 
 ctx.textAlign = "left"; 
 ctx.textBaseline = "top"; 
 ctx.fillText("Goblins caught: " + monstersCaught, 32, 32);
};

// The main game loop 

var main = function () { 
 var now = Date.now(); 
 var delta = now - then; 
 update(delta / 1000); render(); then = now; 
};

// Let's play this game! 
reset(); 
var then = Date.now(); 
setInterval(main, 1); // Execute as fast as possible